<template>
		<div id="caigoulist">
		   <!--    导航栏 -->
			   <van-nav-bar
			      title="采购列表"
			      left-arrow
			      :fixed=true
			      :border=true
			      @click-left="$router.go(-1)"
			   ></van-nav-bar>
		
                <van-cell-group style="margin-top:3rem;">
                   <van-cell  v-for="(list,index) in lists" :key="list.id">
                         <template #title>
                            <span style="font-size:0.5rem;">{{list.xuhao}}.采购编号：</span> <span style="font-size:0.05rem">{{list.bianhao}}</span>
                          </template>
                         <template>
                            <span class="custom-title">可获积分：</span>
                            <span style="color:red">{{list.jifen}}</span>
                          </template>
                         <template #label>
                             <span style="font-size:1px;">{{list.time}} 发布</span>
                          </template>
                         <template #right-icon>                
                              <van-icon name="arrow" @click="tiaozhuang(list.bianhao,list.token)" style="margin-top:0.3rem;margin-left:0.2rem"/>

                          </template>
                   </van-cell>
                </van-cell-group>
                 
                 <!-- 路由的出口 -->
                 <transition name="router-slider" mode="out-in">
                    <router-view></router-view>
                  </transition>
	
		</div>
</template>

<script>
 import {getCaigou} from './../../../service/api/index'

	export default{
		name:"CaigouList",
          data(){
              return{
                  lists:[],
              }
          },
      
    	methods:{
               tiaozhuang(bianhao,token){
                     this.$router.push({path:'/dashboard/mine/CaigouList/CaigouDetail',query:{bianhao:bianhao,token:token}})
               }
   		},
              created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getCaigou().then((response)=>{
                       console.log(response);
                        if (response.success) {
                             this.lists = response.data;
                        }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created
}
</script>


<style scoped>
     #caigoulist{
     	position:fixed;
     	top:0;
     	left:0;
     	bottom:0;
     	right:0;
     	background-color:#f5f5f5;
     	z-index:200;
        overflow-y: scroll;
     }


     .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>